<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<form action="/user?method=register" method="post">
    <table border="1px" cellspacing="0" cellpadding="10px" align="center">
        <tr>
            <th colspan="2">注册界面</th>
        </tr>
        <tr>
            <td>姓名</td>
            <td>
                <input type="text" name="username" id="username" placeholder="请输入姓名" onblur="validateName()">
                <span id="nameMsg"></span>
            </td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" value="1" >男&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="sex" value="2" >女&nbsp;&nbsp;&nbsp;&nbsp;
            </td>
        </tr>
        <tr>
            <td>生日</td>
            <td><input type="date" name="birthday" ></td>
        </tr>
        <tr>
            <td>地址</td>
            <td><input type="text" name="address" placeholder="请输入地址" ></td>
        </tr>
        <tr>
            <td align="center" colspan="2">
                <input type="submit" value="注册">&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="reset" value="重置">&nbsp;&nbsp;&nbsp;&nbsp;
            </td>
        </tr>
    </table>
</form>
</body>
</html>
<script src="/js/jquery-1.11.0.min.js"></script>
<script>

    //校验姓名是否存在
    function validateName(){
        //收集表单中的数据
        let username = $("#username").val()
        console.log("username = "+username)

        //Ajax 异步调用
        $.ajax({
            type:"get",       //请求提交方式 get post
            url:"/user?method=validate&username="+username,  //请求地址
            dataType:"json",  //响应的数据格式，按照json格式进行解析
            success:function (c){
                console.log("c = "+c.flag)
                if(c.flag){
                    $("#nameMsg").html("<font style='color: green'>昵称可用</font>")
                }else{
                    $("#nameMsg").html("<font style='color: orangered'>昵称占用</font>")
                }
            }
        })
    }

</script>
